<script setup>
import Timeline from '../components/Timeline/Timeline.vue'
import { ref } from 'vue'

const verticalItems = ref([
  { timestamp: '2024-01-01', content: '项目立项', type: 'primary' },
  { timestamp: '2024-02-15', content: '开发阶段', type: 'warning', size: 'large' },
  { timestamp: '2024-03-20', content: '测试完成', type: 'success' }
])

const horizontalItems = ref([
  { timestamp: '2024-04-01', content: '规划阶段', type: 'info' },
  { timestamp: '2024-04-15', content: '执行阶段', type: 'primary', color: '#409EFF' },
  { timestamp: '2024-04-30', content: '完成里程碑', type: 'success' }
])
</script>

<template>
  <div class="timeline-demo">
    <!-- 垂直时间线 -->
    <section>
      <h3>垂直时间线</h3>
      <Timeline
          v-for="item in verticalItems"
          :key="item.timestamp"
          direction="vertical"
          :timestamp="item.timestamp"
          :type="item.type"
          :size="item.size"
      >
        {{ item.content }}
      </Timeline>
    </section>

    <!-- 水平时间线 -->
    <section>
      <h3>水平时间线</h3>
      <div class="horizontal-wrapper">
        <Timeline
            v-for="item in horizontalItems"
            :key="item.timestamp"
            direction="horizontal"
            :timestamp="item.timestamp"
            :type="item.type"
            :color="item.color"
        >
          {{ item.content }}
        </Timeline>
      </div>
    </section>
  </div>
</template>

<style scoped>

</style>